import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../common/webview_widget.dart';

class WebViewExample extends StatelessWidget {
  const WebViewExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WebView使用示例'),
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.black),
          onPressed: () => Get.back(),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text(
              'WebView使用示例',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 20),
            
            // 示例1：基本使用
            _buildExampleCard(
              title: '基本WebView',
              description: '打开百度首页',
              onTap: () => _openBasicWebView(),
            ),
            
            const SizedBox(height: 16),
            
            // 示例2：自定义标题
            _buildExampleCard(
              title: '自定义标题',
              description: '打开指定网页并设置标题',
              onTap: () => _openCustomTitleWebView(),
            ),
            
            const SizedBox(height: 16),
            
            // 示例3：隐藏导航按钮
            _buildExampleCard(
              title: '隐藏导航按钮',
              description: '不显示前进后退按钮',
              onTap: () => _openNoNavigationWebView(),
            ),
            
            const SizedBox(height: 16),
            
            // 示例4：带消息交互
            _buildExampleCard(
              title: '消息交互',
              description: 'Flutter与Web页面双向通信',
              onTap: () => _openInteractiveWebView(),
            ),
            
            const SizedBox(height: 16),
            
            // 示例5：使用路由跳转
            _buildExampleCard(
              title: '路由跳转',
              description: '使用Get路由跳转到WebView页面',
              onTap: () => _openWebViewWithRoute(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildExampleCard({
    required String title,
    required String description,
    required VoidCallback onTap,
  }) {
    return Card(
      elevation: 2,
      child: InkWell(
        onTap: onTap,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 8),
              Text(
                description,
                style: const TextStyle(
                  fontSize: 14,
                  color: Colors.grey,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 示例1：基本使用
  void _openBasicWebView() {
    Navigator.push(
      Get.context!,
      MaterialPageRoute(
        builder: (context) => const WebViewWidget(
          url: 'https://www.baidu.com',
          title: '百度',
        ),
      ),
    );
  }

  // 示例2：自定义标题
  void _openCustomTitleWebView() {
    Navigator.push(
      Get.context!,
      MaterialPageRoute(
        builder: (context) => const WebViewWidget(
          url: 'https://www.github.com',
          title: 'GitHub',
        ),
      ),
    );
  }

  // 示例3：隐藏导航按钮
  void _openNoNavigationWebView() {
    Navigator.push(
      Get.context!,
      MaterialPageRoute(
        builder: (context) => const WebViewWidget(
          url: 'https://www.google.com',
          title: 'Google',
          showNavigationButtons: false,
        ),
      ),
    );
  }

  // 示例4：带消息交互
  void _openInteractiveWebView() {
    Navigator.push(
      Get.context!,
      MaterialPageRoute(
        builder: (context) => WebViewWidget(
          url: 'https://www.example.com',
          title: '交互示例',
          onWebMessage: (message) {
            // 处理来自Web页面的消息
            print('收到Web消息: $message');
            Get.snackbar(
              'Web消息',
              message,
              snackPosition: SnackPosition.BOTTOM,
            );
          },
          onUrlChanged: (url) {
            // URL变化时的回调
            print('URL变化: $url');
          },
          onLoadingChanged: (loading) {
            // 加载状态变化时的回调
            print('加载状态: $loading');
          },
          // 注入自定义JavaScript
          initialJavaScript: '''
            // 页面加载完成后发送消息给Flutter
            document.addEventListener('DOMContentLoaded', function() {
              setTimeout(function() {
                window.sendMessageToFlutter('页面加载完成！');
              }, 1000);
            });
            
            // 点击页面时发送消息
            document.addEventListener('click', function() {
              window.sendMessageToFlutter('页面被点击了！');
            });
          ''',
        ),
      ),
    );
  }

  // 示例5：使用路由跳转
  void _openWebViewWithRoute() {
    Get.toNamed(
      '/webview',
      arguments: {
        'url': 'https://www.bing.com',
      },
    );
  }
}

// 在页面中嵌入WebView的示例
class EmbeddedWebViewExample extends StatelessWidget {
  const EmbeddedWebViewExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('嵌入WebView示例'),
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.black),
          onPressed: () => Get.back(),
        ),
      ),
      body: Column(
        children: [
          // 上半部分：其他内容
          Container(
            padding: const EdgeInsets.all(16),
            color: Colors.grey[100],
            child: const Column(
              children: [
                Text(
                  '这是Flutter页面内容',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 8),
                Text('WebView将在下方显示'),
              ],
            ),
          ),
          
          // 下半部分：WebView
          Expanded(
            child: WebViewWidget(
              url: 'https://www.baidu.com',
              showAppBar: false, // 不显示WebView的AppBar
              onWebMessage: (message) {
                print('收到Web消息: $message');
              },
            ),
          ),
        ],
      ),
    );
  }
} 